<template>
  <div class="but">
    <div class="box">
      <el-button type="primary" size="small" :icon="EditPen" @click="edit()">编辑</el-button>
      <el-button type="danger" size="small" :icon="Delete" @click="del">删除</el-button
      ><el-button type="warning" size="small" :icon="Setting" @click="roleAuthorization"
        >分配权限</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { EditPen, Delete, Setting } from '@element-plus/icons-vue'
import { useCounterStoreB } from '@/stores/temporary'

const storeB = useCounterStoreB()
const emit = defineEmits(['rowSon'])
const rowId = ref(storeB.rowId)
const addState = ref()
const edit = () => {
  emit('rowSon')
  addState.value = !addState.value
  storeB.stateFun(addState.value)
  storeB.titleStateFun('编辑角色')
}
const del = async () => {
  emit('rowSon')
  addState.value = !addState.value
  storeB.stateFun(addState.value)
  storeB.titleStateFun('删除角色')
}
const roleAuthorization = () => {
  emit('rowSon')
  addState.value = !addState.value
  storeB.stateFun(addState.value)
  storeB.titleStateFun('分配权限')
}

nextTick(() => {
  rowId.value = storeB.rowId
})
watch(
  () => storeB.addState,
  (newVal) => {
    addState.value = newVal
  },
)
</script>

<style scoped lang="scss"></style>
